<template>
<div class="layout-app" ref='myBox'>
	<!-- main -->
	<el-dialog :title="nameTitle" 
	:visible.sync="addCountVisible" 
	width="18%" 
	v-dialogDrag 
	:modal="false"
	:before-close="handleClose">
	<!-- 新增 -->
	<div class="addAcc">
		<el-form ref="addForm" :model="addForm" label-width="80px" size="mini">
			<el-form-item label="库房名称">
				<el-select v-model="addForm.shedName" placeholder="">
				  <el-option label="中药库" value="中药库" ></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="盘点日期">
				<el-date-picker :disabled="true" v-model="addForm.skDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
			</el-form-item>
			<el-form-item label="备注">
				<el-input type="textarea" v-model="addForm.remark"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">确定</el-button>
				<el-button @click="this.addCountVisible = false">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
	</el-dialog>
</div>

</template>

<script>
// self

// prop

// ext


// 接口
import { tcmskinsert } from "@/api/systemCatalogue/traMedici.js";
import dayjs from "dayjs";
export default {
	props: ['parentMethod'],
	inject: ['reload'], // 无痕刷新
	components:{
		
	},
	data(){
		return{
			//str
			tableWidth:'', //右侧表格动态宽度
			nameTitle:'中药库存盘点',
			//num
			
			//ble
			disabled:true,
			loading:false,
			addCountVisible:false,
			//arr
			formType:[], // 表单头部内容
			tableData:[],
			selectOption:[{id:2,label:'中药库'}],//库房
			
			nameOption:[],
			tableRows:[
				// { name:"系统序号", prop:"id", nz:"nz" },{ name:"药品序号", prop:"id", nz:"nz" },
				{ name:"药品名称", prop:"drugName"},{ name:"规格描述", prop:"drugSpecifications"},
				{ name:"生产厂家", prop:"prodentpName"},
				{ name:"剂量单位", prop:"unt"},{ name:"参考单价", prop:"purcPric"},
				{ name:"参考金额", prop:"purcAmt"},{ name:"供货单位", prop:"supplyCandidateName"},
				// { name:"合同数量", prop:"gdTime", type:"" },{ name:"已购数量", prop:"zf", type:"" },{ name:"库存数量", prop:"ph", type:"" },
				// { name:"近期销量", prop:"scrq", type:"" }
			],
			// 表单验证规则
			addPlanRules:{
				putInDep: [{ required: true, message: '此项必填！', trigger: 'change' }],
				applicantId: [{ required: true, message: '此项必填！', trigger: 'change' }],
				supplyCandidateId: [{ required: true, message: '此项必填！', trigger: 'change' }],
				drugName: [{ required: true, message: '此项必填！', trigger: 'change' }],
				purCnt: [{ required: true, pattern: /^[1-9][0-9]*$/, message: '请输入正确的数量！', trigger: 'blur' }],
			},
			//obj
			pickerOptions: {
			  shortcuts: [
				{ text: '今天', onClick(picker) { picker.$emit('pick', new Date()); }}, 
				{ text: '昨天', onClick(picker) { const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24);picker.$emit('pick', date);}}, 
				{ text: '一周前',onClick(picker) {const date = new Date();date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', date);}},
				]
			},
			//obj
			// form表单 * 
			addForm:{
				shedName:'中药库',
				skDate:'',
				remark:''
			},
		}
	},
	mounted() {
		// 获取接口参数
		this.getAddForm();
		//获取动态盒子宽度，实时赋值给右侧
		this.$nextTick(() => {
		    const box = this.$refs.myBox;
		    this.tableWidth = box.offsetWidth;
		    console.log('盒子的宽度是:', this.tableWidth);
		});
	},
	methods:{
		// 挂载或销毁前后重新赋值后端参数
		getAddForm(){
			// 获取当前日期时间
			this.addForm.skDate = dayjs().format('YYYY-MM-DD');
			// 解构赋值排除 list 属性 => 弃用
			// this.addHeadrForm = addForm.map(item => { let { list, ...newItem } = item; return newItem })[0];
		},
		// 打开模态框
		async open(param){
			if(param == '新增'){
				this.addCountVisible = true;
				this.isShow = true
				this.isEditShow = false;
				this.nameTitle = '新建中药库存盘点单'
			}else{
				
			}
		},
		// 保存tcmSkInsert
		async onSubmit(){
			let res = await tcmskinsert(this.addForm);
			if(res.code === 200){
				console.log(res,'要传的参数');
				this.$confirm(res.message, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					// 触发自定义事件将res.data传递给父组件
					this.addCountVisible = false;
					this.$emit('untable-data', res);
				}).catch(() => {
				  this.$message({ type: 'info', message: '取消操作'});          
				});
			}else if(res.code === 201){
				console.log(res,'要传的参数');
				this.$confirm(res.message, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					// 触发自定义事件将res.data传递给父组件
					this.addCountVisible = false;
					this.$emit('untable-data', res);
				}).catch(() => {
				  this.$message({ type: 'info', message: '取消操作'});          
				});
			  }
			
		},
		// col 里面包含了表头字段和名称，list 是表格数据
		columnWidth(col, list) {
		  let prop = col.prop,lab = col.lab;
		  let width = 20; // 设定一个最小值
		  let maxlenStr = ""; // 最长字符串
		  for (let info of list) {
			if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
		  }
		  width = Math.max(width, len(lab), len(maxlenStr));
		  // 表格自带的内边距(20px) 自调
		  return width + 12; // 这里加了 12px
		  function len(str) {
			// 实际分配长度可根据需要自行调整
			let length = 12;
			for (const char of str + "") {
			  // 英文小写字符 8px
			  if ("a" <= char && char <= "z") length += 18;
			  // 数字
			  else if (Number.isFinite(Number(char))) length += 8;
			  // 英文大写字符 8px
			  else if ("A" <= char && char <= "Z") length += 8;
			  // 中文字符 28px
			  else if (char >= "\u4e00" && char <= "\u9fa5") length += 18;
			  // 其他 8px
			  else length += 8;
			}
			return length;
		  }
		},
		// 关闭Model
		handleClose(done) {
			done(); //关闭
		},
	},
	
}
</script>

<style lang="less" scoped>
.layout-app{
    width: 100%;
    height: 100%;
    display: flex;
	background-color: f8f8f8;
	/deep/ .el-dialog__body{
	    padding: 12px;
	}
	/deep/ .el-button{
		background-color: var(--primary-color, #409EFF) !important;
	}
	/deep/ .el-dialog__header{
	    padding: 4px;
	    line-height: 28px;
	    background-color: var(--primary-color, #409EFF) !important;
	    color: var(--text-color, #304156) !important;
	}
	/deep/ .el-dialog__title{
	    color: var(--text-color, #304156) !important;
	    font-size: 14px;
	}
	/deep/ .el-dialog__headerbtn{
	    top: 10px;
	}
	/deep/ .el-dialog__body{
	    padding: 12px;
	}
    .addAcc{
		
		.dialog-footer{
			display: flex;
			justify-content: right;
		}
	}
}
</style>